<template>
  <div class="gallery-container" @click="handleGalleryClick ">
    <div class="img-wrapper">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="(item, index) of imgsList" :key="index">
          <img class="gallery-img"  :src="item" alt="" />
        </swiper-slide>
        <!-- <swiper-slide>
          <img class="gallery-img" src="http://img1.qunarzz.com/sight/p0/1412/8c/00acc470780a5d986d8de5c0ceb5b701.water.jpg_r_800x800_7da3e204.jpg" alt="" />
        </swiper-slide> -->
        <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallery',
  props: {
    imgsList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data: function() {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observer: true,  // 在swiper显示和隐藏的时候,自动的初始化swiper, 这样宽度的计算就不会有问题了
        observeParents: true,  //对父级元素的父级修改也会重新的初始化
        // 教训,当有错误时, 一定要检查字有没有写错, observeParents我这个写成observesParents....迟迟没有找到错误
      }
    }
  },
  methods: {
    handleGalleryClick: function(event) {
      this.$emit('closeGallery', event);
    }
  }
}
</script>

<style lang="stylus" scoped >
  div {
    display: flex;
  }

  .gallery-container {
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    overflow: hidden;//ovh为了禁用滚动
    .img-wrapper {
      // overflow: hidden; 
      // relative后高度重新计算, 所以"实际高度值是widh: 100%"
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 70%;
      color: #fff;
    
    // 其实不用样式穿透也可以的, 但是样式穿透就能突出.swiper-container不是一个这个组件内的DOM元素
      & >>> .swiper-container {
        // 不用absolute的话, 那么继承的height是0, 
        // 用了absolute, 那么高度是height+padding-top+padding-bottom, 
        // 宽度是width + padding-left+ padding-right  (不会加上border的length)
        // 因为新开了
        overflow: visible;
        position: absolute;
        // top: 0;
        // bottom: 0;
        // left: 0;
        // right: 0;
        width: 100%;
        height: 100%;
        // background-color: orange;
      }     

      .gallery-img {
        width: 100%;
        height: 100%;
        // height: auto;
      }

      .swiper-pagination {
        bottom: -1rem;
        justify-content: center;
      }
    }
  }
</style>